<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../../css/shouye/shouye.css"/>

    <script src="../../js/zepto-1.1.6.min.js"></script>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/template-web.js"></script>
    <!-- 高德地图js API -->
    <script src="https://webapi.amap.com/maps?v=1.3&key=af688a3d486106b0a18ad7a618ad33ee&plugin=AMap.DistrictSearch"></script>
    <script src='https://webapi.amap.com/maps?v=1.3&key=af688a3d486106b0a18ad7a618ad33ee&plugin=AMap.ToolBar'></script>
    <script src="https://webapi.amap.com/ui/1.0/main.js"></script>
</head>

<body>

<!-- header -->
<header class="mui-bar mui-bar-nav">
    <ul class="head">
        <li class="city" id="city">
            <a>
                <span class="weizhi mui-ellipsis">濮阳</span>
                <!--<span>濮阳</span>-->
                <img src="../../img/shouye/jiantou.png" alt=""/>
            </a>

        </li>
        <li class="link">
            <a href="javascript:;">
                <img src="../../img/shouye/icon_sousuo_hui@2x.png" alt=""/>
                <input data-link="search.html" type="search" placeholder="搜索附近门店" id="searchBox"/>
            </a>
        </li>
        <li class="sys" id="erweima">
            <a href="javascript:;">
                <p><img src="../../img/shouye/icon_saoyisao@2x.png" alt=""/></p>
            </a>
        </li>
    </ul>
</header>


<!-- content -->
<div class="mui-content">

    <!-- banner -->
    <div id="slider" class="mui-slider">
        <div class="mui-slider-group">
            <div class="mui-slider-item"><a href="#"><img src="../../img/shouye/ban1.png"/></a></div>
            <div class="mui-slider-item"><a href="#"><img src="../../img/shouye/ban2.png"/></a></div>
            <div class="mui-slider-item"><a href="#"><img src="../../img/shouye/ban3.png"/></a></div>
        </div>


    </div>

    <!-- 导航 -->
    <div class="nav">
        <ul>
            <li>
                <a href="./meishi.html" data-cate="1">
                    <img src="../../img/shouye/ms@2x.png" alt=""/>
                    <span>美食</span>
                </a>
            </li>
            <li>
                <a href="./dianying.html" data-cate="2">
                    <img src="../../img/shouye/nav7.png" alt=""/>
                    <span>电影</span>
                </a>
            </li>            <li>
                <a href="./lvyou.html" data-cate="2">
                    <img src="../../img/shouye/nav1.png" alt=""/>
                    <span>旅游</span>
                </a>
            </li>
            <li>
                <a href="./xiuxian.html" data-cate="3">
                    <img src="../../img/shouye/nav4.png" alt=""/>
                    <span>休闲</span>
                </a>
            </li>
            <li>
                <a href="./shangchao.html" data-cate="4">
                    <img src="../../img/shouye/nav2.png" alt=""/>
                    <span>商超</span>
                </a>
            </li>


        </ul>
        <div style="clear: both;"></div>
    </div>

    <!--推荐活动-->
    <div class="huodong">
        <div class="huodong_tit">
            <p>
                <img src="../../img/shouye/130@2x.png" alt=""/>
                <span>推荐活动</span>
            </p>
        </div>
        <div class="huodong_txt" id="huodong_txt">
            <a style="height: 180px;" href="javascript:void(0);"><img
                    src="../../img/shouye/tjhd_1@2x.png" height="170px" width="100%"/></a>
            <a style="height: 180px;" href="javascript:void(0);"><img
                    src="../../img/shouye/tjhd_2@2x.png" height="170px" width="100%"/></a>
            <div style="clear: both;"></div>
        </div>
    </div>

    <!--推荐分类-->
    <div class="fenlei">
        <div class="fenlei_tit">
            <p>
                <img src="../../img/shouye/tjfl@2x.png" alt="" style="width: 12px;"/>
                <span>推荐分类</span>
            </p>
        </div>
        <div class="fenlei_txt" id="recommendCategory">
            <a href="javascript:void(0);">
                <img src="../../img/shouye/tjfl_1@2x.png"/>
                <span>推荐</span>
            </a>
            <a href="javascript:void(0);">
                <img src="../../img/shouye/tjfl_2@2x.png"/>
                <span>推荐</span>
            </a>
            <a href="javascript:void(0);">
                <img src="../../img/shouye/tjfl_2@2x.png"/>
                <span>推荐</span>
            </a>
            <a href="javascript:void(0);">
                <img src="../../img/shouye/tjfl_2@2x.png"/>
                <span>推荐</span>
            </a>
            <div style="clear: both;"></div>
        </div>
    </div>

    <!--推荐商品-->
    <div class="shangpin">
        <div class="huodong_tit">
            <p>
                <img src="../../img/shouye/tjsp@2x.png" alt="" style="width: 13px;"/>
                <span>推荐商品</span>
            </p>
        </div>
        <div class="shangpin_top sp" id="shangpin_top">
            <a href="javascript:void(0);">
                <img src="../../img/shouye/tjfl_2@2x.png" style="width: 49vw; height: 49vw;"/>
                <span class="mui-ellipsis">推荐商品1</span>
            </a>
            <a href="javascript:void(0);">
                <img src="../../img/shouye/tjfl_1@2x.png" style="width: 49vw; height: 49vw;"/>
                <span class="mui-ellipsis">推荐商品2</span>
            </a>

            <div style="clear: both;"></div>
        </div>
        <div class="shangpin_bot sp" id="shangpin_bot">
            <a style="height: 115px;" href="javascript:void(0);">
                <img height="105px" src="../../img/shouye/tjfl_3@2x.png"/>
                <span class="mui-ellipsis">推荐商品3</span>
            </a>

            <a style="height: 115px;" href="javascript:void(0);">
                <img height="105px" src="../../img/shouye/tjfl_3@2x.png"/>
                <span class="mui-ellipsis">推荐商品3</span>
            </a>

            <a style="height: 115px;" href="javascript:void(0);">
                <img height="105px" src="../../img/shouye/tjfl_3@2x.png"/>
                <span class="mui-ellipsis">推荐商品3</span>
            </a>

            <a style="height: 115px;" href="javascript:void(0);">
                <img height="105px" src="../../img/shouye/tjfl_3@2x.png"/>
                <span class="mui-ellipsis">推荐商品3</span>
            </a>

            <a style="height: 115px;" href="javascript:void(0);">
                <img height="105px" src="../../img/shouye/tjfl_3@2x.png"/>
                <span class="mui-ellipsis">推荐商品3</span>
            </a>

            <a style="height: 115px;" href="javascript:void(0);">
                <img height="105px" src="../../img/shouye/tjfl_3@2x.png"/>
                <span class="mui-ellipsis">推荐商品3</span>
            </a>


            <div style="clear: both;"></div>
        </div>
    </div>
</div>


<!-- footer -->
<nav class="mui-bar mui-bar-tab nav-tab-isshow">
    <a href="javascript:;">
        <img src="../../img/shouye/Home@2x.png"/>
        <span>首页</span>
    </a>
    <a href="../fujin/fujin.html">
        <img src="../../img/shouye/fujin@2x.png"/>
        <span>附近</span>
    </a>
    <a href="../jifen/index.html">
        <img src="../../img/shouye/jifenshagncheng@2x.png"/>
        <span>积分商城</span>
    </a>
    <a href="../mine/index.html">
        <img src="../../img/shouye/wode@2x.png"/>
        <span>我的</span>
    </a>
</nav>

<script src="../../js/common.js"></script>
<script type="text/javascript">
    mui.init();

    /**
     * 高德地图 MobiCityPicker（城市选择器）
     * 文档：https://lbs.amap.com/api/javascript-api/reference-amap-ui/other/mobicitypicker
     */
    AMapUI.setDomLibrary(Zepto);
    $('.city').on('tap', function () {
        //////加载MobiCityPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
        AMapUI.loadUI(['misc/MobiCityPicker'], function (MobiCityPicker) {
            var cityPicker = new MobiCityPicker({});
            //////监听城市选中事件
            cityPicker.on('citySelected', function (cityInfo) {
                ////  //隐藏城市列表
                cityPicker.hide();
                console.log(cityInfo.adcode);
                $('.weizhi').html(cityInfo.name);
                localStorage.setItem('adode', cityInfo.adcode);

                ////  //选中的城市信息
            });
            //////显示城市列表，可以用某个click事件触发
            cityPicker.show();
        });
    });

    //banner
    $(document).on('tap', '.mui-slider-item a', function() {
        goToPage('AD-detail.html', 'shouye/AD-detail.html');
    });

    // 活动
    $(document).on('tap', '#huodong_txt a', function() {
        goToPage('shop_detail_cate.html', 'shouye/shop_detail_cate.html');
    });
    // 推荐分类
    $(document).on('tap', '#recommendCategory a', function() {
        goToPage('dianPu_detail.html', 'shoye/dianPu_detail.html');
    });
    // 商品
    $(document).on('tap', '.sp a', function() {
        goToPage('shop_detail_cate.html', 'shouye/shop_detail_cate.html');
    });



    //搜索
    $(document).on('keyup', '#searchBox', function(e) {
        var val = $(this).val();
        if(val == undefined || val == '') {
            mui.toast('请输入搜索内容')
            return;
        }
        if(e.keyCode === 13) {
            window.localStorage.setItem('search-shopname', val);
            goToPage('search.html', 'shouye/search.html');
        }
    })
</script>
</body>
</html>